<template>
    <div class="survey container-content">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="甲供" name="first">
                <el-row class="export-container">
                    <el-button type="primary" @click="addNewData(activeName)"
                        >新增</el-button
                    >
                    <el-button type="primary" @click="exporting"
                        >导出</el-button
                    >
                </el-row>
                <el-row class="filter-container">
                    <el-col :span="24">
                        <el-input
                            placeholder="查询..."
                            v-model="searchValue"
                            class="input-with-select"
                            @change="searchData"
                        >
                            <el-button
                                slot="append"
                                icon="el-icon-search"
                                type="primary"
                                @click="searchData"
                            ></el-button>
                        </el-input>
                    </el-col>
                </el-row>
                <el-table
                    ref="customerTable"
                    :data="tableData"
                    stripe
                    style="width: 100%"
                >
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="id" label="id"> </el-table-column>
                    <el-table-column prop="" label="处理流程"></el-table-column>
                    <el-table-column prop="" label="流程步骤">
                    </el-table-column>
                    <el-table-column prop="" label="入库单号">
                    </el-table-column>

                    <el-table-column prop="wareName" label="仓库名称">
                    </el-table-column>
                    <el-table-column prop="projectName" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="inOutTime" label="入库日期">
                    </el-table-column>
                    <el-table-column prop="totalNumber" label="数量合计">
                    </el-table-column>
                    <el-table-column prop="ensureMoney" label="保证金金额">
                    </el-table-column>
                    <el-table-column
                        prop="totalNoTaxMoney"
                        label="不含税金额合计"
                    >
                    </el-table-column>
                    <el-table-column prop="totalTaxMoney" label="	含税金额合计">
                    </el-table-column>
                    <el-table-column prop="" label="备注"> </el-table-column>
                    <el-table-column prop="" label="添加人"> </el-table-column>

                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                content="详情"
                                placement="bottom"
                            >
                                <el-button
                                    plain
                                    size="small"
                                    icon="el-icon-more"
                                    @click="
                                        handleDetail(scope.$index, scope.row)
                                    "
                                ></el-button>
                            </el-tooltip> -->
                            <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑"
                                placement="bottom"
                            >
                                <el-button
                                    type="primary"
                                    plain
                                    size="small"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                ></el-button>
                            </el-tooltip> -->
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除"
                                placement="bottom"
                            >
                                <el-button
                                    type="danger"
                                    plain
                                    size="small"
                                    icon="el-icon-delete"
                                    @click="
                                        handleDelete(scope.$index, scope.row)
                                    "
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pagination"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :size="pageSize"
                >
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="自购" name="second">
                <el-row class="export-container">
                    <el-button type="primary" @click="addNewData(activeName)"
                        >新增</el-button
                    >
                    <el-button type="primary" @click="exporting"
                        >导出</el-button
                    >
                </el-row>
                <el-row class="filter-container">
                    <el-col :span="24">
                        <el-input
                            placeholder="查询..."
                            v-model="searchValueSelf"
                            class="input-with-select"
                            @change="searchData"
                        >
                            <el-button
                                slot="append"
                                icon="el-icon-search"
                                type="primary"
                                @click="searchData"
                            ></el-button>
                        </el-input>
                    </el-col>
                </el-row>
                <el-table
                    ref="customerTable"
                    :data="tableDataSelf"
                    stripe
                    style="width: 100%"
                >
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="id" label="id"> </el-table-column>
                    <el-table-column prop="" label="处理流程"></el-table-column>
                    <el-table-column prop="" label="流程步骤">
                    </el-table-column>
                    <el-table-column prop="" label="入库单号">
                    </el-table-column>

                    <el-table-column prop="wareName" label="仓库名称">
                    </el-table-column>
                    <el-table-column prop="projectName" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="inOutTime" label="入库日期">
                    </el-table-column>
                    <el-table-column prop="totalNumber" label="数量合计">
                    </el-table-column>
                    <el-table-column prop="ensureMoney" label="保证金金额">
                    </el-table-column>
                    <el-table-column
                        prop="totalNoTaxMoney"
                        label="不含税金额合计"
                    >
                    </el-table-column>
                    <el-table-column prop="totalTaxMoney" label="	含税金额合计">
                    </el-table-column>
                    <el-table-column prop="" label="备注"> </el-table-column>
                    <el-table-column prop="" label="添加人"> </el-table-column>

                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                content="详情"
                                placement="bottom"
                            >
                                <el-button
                                    plain
                                    size="small"
                                    icon="el-icon-more"
                                    @click="
                                        handleDetail(scope.$index, scope.row)
                                    "
                                ></el-button>
                            </el-tooltip> -->
                            <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑"
                                placement="bottom"
                            >
                                <el-button
                                    type="primary"
                                    plain
                                    size="small"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                ></el-button>
                            </el-tooltip> -->
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除"
                                placement="bottom"
                            >
                                <el-button
                                    type="danger"
                                    plain
                                    size="small"
                                    icon="el-icon-delete"
                                    @click="
                                        handleDelete(scope.$index, scope.row)
                                    "
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="table-pagination"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalSelf"
                    :size="pageSizeSelf"
                >
                </el-pagination>
            </el-tab-pane>
            <!-- 弹出框 -->
            <el-drawer
                :title="activeName === 'first' ? '新增甲供' : '新增自购'"
                :visible.sync="drawer"
                direction="rtl"
                :before-close="handleClose"
                size="100%"
                destroy-on-close
            >
                <div class="drawer-content">
                    <FormCom ref="formRef" />
                </div>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submit">保存</el-button>
                </div>
            </el-drawer>
        </el-tabs>
    </div>
</template>
<script>
import {
    getKingInventoryList,
deleteKingInventory
} from "@/api/bim/bim";
import FormCom from "./add/index";
export default {
    components: {
        FormCom,
    },
    data() {
        return {
            searchValue: "",
            total: 0,
            pageSize: 0,
            searchValueSelf: "",
            totalSelf: 0,
            pageSizeSelf: 0,
            tableData: [],
            tableDataSelf: [],
            activeName: "first",
            drawer: false, //弹窗显示
        };
    },
    methods: {
        exporting() {
            
        },
        // 获取甲供列表
        getData() {
            let type = 1;
            let inStorageType = 1;
            getKingInventoryList({ type, inStorageType }).then((res) => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.pageSize = res.data.size;
                }
            });
        },
        // 获取自购列表
        getData_self() {
            let type = 1;
            let inStorageType = 2;
            getKingInventoryList({ type, inStorageType }).then((res) => {
                if (res.code === 200) {
                    this.tableDataSelf = res.data.records;
                    this.total = res.data.total;
                    this.pageSize = res.data.size;
                }
            });
        },
        // tab切换事件
        handleClick(val) {
            if (val.index == "1") {
                this.getData_self();
            } else {
                this.getData();
            }
        },
        // 删除事件
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteKingInventory(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 搜索事件
        searchData() {
            // let searchValue = this.searchValue;
            // searchSurvey({ searchValue }).then((res) => {
            //   this.tableData = res.rows;
            //   console.log("请求成功", res);
            // });
        },

        //新增按钮
        addNewData(index) {
            this.drawer = true;
        },
        // //编辑按钮
        // handleEdit(index, row) {
        //     this.rowId = row.id;
        //     this.drawer = true;
        // },
        // // 详情按钮
        // handleDetail(index, row) {
        //     this.detailId = row.id;
        //     this.showDetail = true;
        // },
        // 保存
        submit() {
            this.$refs.formRef.onSubmit();
            this.drawer = false;
            this.drawerSelf = false;
            this.getData();
        },
        // 取消
        cancelForm() {
            this.drawer = false;
            this.drawerSelf = false;
            this.getData();
        },
        // 关闭 drawer
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                    this.rowId = "";
                    this.getData();
                })
                .catch((_) => {});
        },
    },
    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}

.export-container {
    margin: 15px 0;
}

.pagination {
    margin-top: 10px;
}
</style>
